<template>
    <div class="login_box">
        <h1>商城后台管理系统</h1>
        <p>
            账号:
            <el-input
                v-model="form.adminname"
                type="text"
                placeholder="请输入您的用户名"
            />
        </p>
        <p>
            密码:
            <el-input
                v-model="form.password"
                type="password"
                placeholder="请输入您的密码"
                show-password
            />
        </p>
        <el-button type="primary" @click="login">登录</el-button>
    </div>
</template>

<script>
import { ElMessage } from "element-plus";
// import md5 from "md5";
// import axios from "axios";
import { loginRequest } from "../api/login";
export default {
    data() {
        return {
            form: {
                adminname: "admin",
                password: "123456",
            },
        };
    },
    methods: {
        async login() {
            // 参数校验
            if (this.form.adminname === "" || this.form.password === "") {
                return ElMessage({
                    message: "账号或密码不能为空",
                    type: "warning",
                });
            }

            // 发送请求
            const data = await loginRequest(this.form);

            // 请求完毕后 做的事情
            if (data.code !== "200") {
                return ElMessage({
                    type: "warning",
                    message: data.message,
                });
            }

            ElMessage({
                type: "success",
                message: data.message,
            });

            // 存储用户信息
            // console.log(data)
            // console.log(data.data)
            this.$store.commit('setUserInfo', data.data)

            // 存储完毕后, 跳转到首页
            this.$router.push("/");
        },

        // async login() {
        //     // 1. 获取到用户输入的账号密码
        //     // console.log(this.form)

        //     // 2. 对账号密码添加非空校验
        //     if (this.form.adminname === "" || this.form.password === "") {
        //         return ElMessage({
        //             message: "账号或密码不能为空",
        //             type: "warning",
        //         });
        //     }

        //     // 3. 对账号密码添加正则校验
        //     // /^[\w-]{4,16}$/;
        //     // /^\d{6}$/

        //     // 4. 发送请求 (可以根据项目决定是否添加参数加密)
        //     // console.log("正常的用户名: ", this.form.adminname);
        //     // console.log("正常的密码: ", this.form.password);
        //     // console.log("加密后的用户名: ", md5(this.form.adminname));
        //     // console.log("加密后的密码: ", md5(this.form.password));

        //     // axios({
        //     //     url: 'http://121.89.205.189:3000/admin/admin/login',
        //     //     // method: 'get'
        //     //     // params: this.form
        //     //     method: 'post',
        //     //     data: this.form,
        //     // })
        //     // axios.get('http://121.89.205.189:3000/admin/admin/login', {
        //     //     params: this.form
        //     // })

        //     // axios
        //     //     .post("http://121.89.205.189:3000/admin/admin/login", this.form)
        //     //     .then((res) => {
        //     //         console.log(res);
        //     //     });

        //     const { data } = await axios.post(
        //         "http://121.89.205.189:3000/admin/admin/login",
        //         this.form
        //     );

        //     // 4.1 错误前置
        //     if (data.code !== "200") {
        //         return ElMessage({
        //             type: "warning",
        //             message: data.message,
        //         });
        //     }

        //     /**
        //      *  4.2 当代码运行到这个位置的时候, 说明登陆成功
        //      *
        //      *      1. 提醒用户登陆成功
        //      *      2. 存储用户的一些信息 (ID, TOKEN)
        //      *      3. 跳转到首页
        //      */

        //     // 4.2.1 提醒用户登陆成功
        //     ElMessage({
        //         type: "success",
        //         message: data.message,
        //     });

        //     // 4.2.2 存储用户的一些信息 (ID, TOKEN)

        //     // 4.2.3 跳转到首页
        //     this.$router.push("/");

        //     // 原生 ajax, 没有添加参数校验, 也没有添加参数加密
        //     // const xhr = new XMLHttpRequest();
        //     // xhr.open("post", "http://121.89.205.189:3000/admin/admin/login");
        //     // xhr.setRequestHeader("content-type", "application/json");
        //     // xhr.send(JSON.stringify(this.form));
        //     // xhr.onload = function () {
        //     //     console.log(xhr.responseText);
        //     // };
        // },
    },
};
</script>

<style lang="scss" scoped>
.login_box {
    width: 300px;
    height: 200px;
    background-color: #dddcdc;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    padding: 20px 30px;

    h1 {
        text-align: center;
    }

    .el-input {
        width: 85%;
    }
    .el-button {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>
